{% extends 'dns_manager/base.html' %}

{% block title %}DNS管理系统 - 多云域名解析管理平台{% endblock %}

{% block content %}
<div class="hero-section bg-gradient py-5 mb-5">
    <div class="container text-center text-white">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-4" style="color: #020202;">
                    <i class="bi bi-cloud-arrow-up text-warning me-3" ></i>
                    DNS管理系统
                </h1>
                <p class="lead mb-4" style="color: #020202;">
                    统一管理多个云服务商的域名解析，支持阿里云、腾讯云、华为云、火山引擎
                </p>
                {% if not user.is_authenticated %}
                    <div class="d-grid gap-2 d-md-block">
                        <a href="{% url 'login' %}" class="btn btn-warning btn-lg px-4 me-3">
                            <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
                        </a>
                        <a href="{% url 'admin:index' %}" class="btn btn-outline-light btn-lg px-4">
                            <i class="bi bi-person-plus me-2"></i>管理后台
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% if user.is_authenticated %}
    <!-- 仪表盘内容 -->
    {% include 'dns_manager/dashboard_content.html' %}
{% else %}
    <!-- 功能特性展示 -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mx-auto mb-3">
                        <i class="bi bi-cloud-check"></i>
                    </div>
                    <h5 class="card-title">多云支持</h5>
                    <p class="card-text text-muted">
                        统一管理阿里云、腾讯云、华为云、火山引擎等主流云服务商的DNS解析
                    </p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-success bg-gradient text-white rounded-circle mx-auto mb-3">
                        <i class="bi bi-lightning-charge"></i>
                    </div>
                    <h5 class="card-title">快速操作</h5>
                    <p class="card-text text-muted">
                        简洁直观的界面设计，快速完成域名解析的增删改查操作
                    </p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-info bg-gradient text-white rounded-circle mx-auto mb-3">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h5 class="card-title">安全可靠</h5>
                    <p class="card-text text-muted">
                        密钥加密存储，操作日志记录，确保DNS管理的安全性和可追溯性
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 支持的云服务商 -->
    <div class="bg-white rounded-3 shadow-sm p-4 mb-5">
        <h3 class="text-center mb-4">
            <i class="bi bi-cloud me-2 text-primary"></i>支持的云服务商
        </h3>
        <div class="row text-center">
            <div class="col-6 col-md-3 mb-3">
                <div class="p-3">
                    <div class="cloud-provider-icon bg-light rounded p-3 mb-2">
                        <i class="bi bi-cloud text-primary" style="font-size: 2rem;"></i>
                    </div>
                    <h6>阿里云</h6>
                    <small class="text-muted">Alibaba Cloud</small>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
                <div class="p-3">
                    <div class="cloud-provider-icon bg-light rounded p-3 mb-2">
                        <i class="bi bi-cloud text-success" style="font-size: 2rem;"></i>
                    </div>
                    <h6>腾讯云</h6>
                    <small class="text-muted">Tencent Cloud</small>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
                <div class="p-3">
                    <div class="cloud-provider-icon bg-light rounded p-3 mb-2">
                        <i class="bi bi-cloud text-warning" style="font-size: 2rem;"></i>
                    </div>
                    <h6>华为云</h6>
                    <small class="text-muted">Huawei Cloud</small>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
                <div class="p-3">
                    <div class="cloud-provider-icon bg-light rounded p-3 mb-2">
                        <i class="bi bi-cloud text-danger" style="font-size: 2rem;"></i>
                    </div>
                    <h6>火山引擎</h6>
                    <small class="text-muted">ByteDance Cloud</small>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.cloud-provider-icon {
    transition: transform 0.3s ease;
}

.cloud-provider-icon:hover {
    transform: translateY(-5px);
}
</style>
{% endblock %}